 /*
 * @description: 豆腐块
 * @Author: along
 * @Date: 2021-10-20
 * @Last Modified by: along
 * @Last Modified time: 2021-10-20
 */
<template>
    <div
        class="activelistActive"
        @click="emitEvent(12)"
        v-if="isLoad"
    >
        <div class="__wrap">
            <div
                v-for="(row,index) in activity_list"
                :key="index"
                class="__items"
                :style="{marginRight: !!(index % 2) ? '0px' : '9px'}"
            >
                <div class="__title">
                    {{ row.title }}
                </div>
                <div
                    class="__info"
                    :style="{ color: row.info_color }"
                >
                    {{ row.info }}
                </div>
                <!-- <div
                    class="__images"
                    :style="{
                        background: `url(${row.image1}) center center no-repeat`,
                        backgroundSize: 'cover'
                    }"
                /> -->
                <div class="images">
                    <div
                        class="__images"
                        :style="{
                            background: `url(${row.image1}) center center no-repeat`,
                            backgroundSize: 'cover'
                        }"
                    />
                    <div
                        class="__images"
                        :style="{
                            background: `url(${row.image2}) center center no-repeat`,
                            backgroundSize: 'cover'
                        }"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // baseconfig: {
        //     type: Object,
        //     default: () => {}
        // },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {
            // rate: '0px 0px 0px 0px',
            isLoad: false,
            colors: ['#20a0ff', '#F5A623', '#F95B56', '#6350E3'],
            activity_list: []
        };
    },
    watch: {
        //圆角单位转换
        // baseconfig:  {
        //     handler: function (val, oldVal) {
        //         let rateValue = val.style.borderRadius;

        //         this.rate = rateValue.replace(/rpx/g, 'px');
        //         this.isLoad = true;
        //     },
        //     deep: true
        // }
    },
    mounted () {
        this.isLoad = true;
        // if(JSON.stringify(this.baseconfig.style) !== '{}') {//回填圆角
        //     let rateValue = this.baseconfig.style.borderRadius;

        //     this.rate = rateValue.replace(/rpx/g, 'px');
        // }

        this.$post('/student/custom_page_for_shop_index%5Cget_data_for_app_show', {
            item_type: 12,
            data_json: JSON.stringify({})
        }, resp => {
            if(resp.code == 1){
                this.activity_list = resp.data.data.list;
            }
        });

    },
    methods: {
        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        }
    }
};
</script>

<style lang="less" scoped>
.activelistActive {
    width: 375px;
    box-sizing: border-box;
    border: 1px #ffffff solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(242, 242, 242, 1);
    background: rgba(242, 242, 242, 1);
    .__wrap {
        width: 355px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        .__items {
            width: 173px;
            height: 143px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            box-sizing: border-box;
            padding: 12px 10px;
            border-radius: 8px;
            .__title {
                color: rgba(63, 69, 75, 1);
                font-size: 16px;
                font-weight: bold;
            }
            .__info {
                font-size: 12px;
                font-weight: bold;
                margin-top: 8px;
                margin-bottom: 12px;
            }

            .images {
                width: 149px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .__images {
                    width: 72px;
                    height: 72px;
                }
            }
        }
    }
}
</style>